<template>
  <div>
    <xy-table
      :addFormDTO="addFormDTO"
      :api="api"
      :columns="columns"
      :onView="onView"
    >
      <template #addItem>
        <div>
          <el-button
            @click="showRechargeDialog"
            icon="el-icon-plus"
          >充值</el-button>
          <el-button
            @click="showAgencyDialog"
            icon="el-icon-plus"
          >代发</el-button>
          <el-button
            @click="openBillUrl"
            icon="el-icon-plus"
          >账单</el-button>
        </div>
      </template>

      <template #appendButton="{row}">
        <el-button
          @click="onShowSignDialog(row)"
          type="text"
        >签约</el-button>
      </template>
    </xy-table>
    <el-dialog
      :visible.sync="signVisible"
      title="支付宝签约"
      width="38%"
    >
      <div class="row jcc">
        <iframe
          :src="signUrl"
          frameborder="0"
          height="400px"
          scrolling="no"
          width="60%"
        ></iframe>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="signInfoVisible"
      title="签约信息"
      width="62%"
    >
      <display-table :model="signInfo"></display-table>
      <template #footer>
        <el-button @click="onUnsign">解约</el-button>
      </template>
    </el-dialog>
    <!-- #region View -->
    <el-dialog
      :visible.sync="viewVisible"
      title="查看"
      width="62%"
    >
      <div>
        <h1>基本信息</h1>
        <display-table :model="service"></display-table>
        <h1>支付宝签约信息</h1>
        <display-table :model="signInfo"></display-table>
        <h1>支付宝记账本</h1>
        <display-table :model="accountBook"></display-table>
        <h1>支付宝备付金账户</h1>
        <display-table :model="extCardInfo"></display-table>
      </div>
    </el-dialog>
    <!-- #endregion -->
    <!-- #region recharge -->
    <el-dialog
      :visible.sync="rechargeDialogVisible"
      title="充值"
    >
      <el-form
        :model="rechargeFormData"
        :rules="$rules"
        label-width="7rem"
        ref="rechargeForm"
      >
        <el-form-item
          :label="$language.local('transAmount')"
          prop="transAmount"
        >
          <xy-decimal v-model="rechargeFormData.transAmount"></xy-decimal>
        </el-form-item>

        <el-form-item
          :label="$language.local('orderTitle')"
          prop="orderTitle"
        >
          <xy-input v-model="rechargeFormData.orderTitle"></xy-input>
        </el-form-item>
        <el-form-item
          :label="$language.local('remark')"
          prop="remark"
        >
          <xy-input v-model="rechargeFormData.remark"></xy-input>
        </el-form-item>
      </el-form>
      <div class="form-footer">
        <el-button
          @click="onRecharge"
          type="primary"
        >提交</el-button>
      </div>
    </el-dialog>
    <!-- #endregion -->

    <!-- #region Agency -->
    <el-dialog
      :visible.sync="agencyDialogVisible"
      title="代发"
    >
      <el-form
        :model="agencyFormData"
        :rules="$rules"
        class="pr-2"
        label-width="9rem"
        ref="agencyForm"
      >
        <el-form-item
          :label="$language.local('transAmount')"
          prop="transAmount"
        >
          <xy-decimal v-model="agencyFormData.transAmount"></xy-decimal>
        </el-form-item>
        <el-form-item
          :label="$language.local('收款账户类型')"
          prop="payeeInfo.identityType"
        >
          <el-select v-model="agencyFormData.payeeInfo.identityType">
            <el-option
              label="银行卡"
              value="BANKCARD_ACCOUNT"
            ></el-option>
            <el-option
              label="支付宝"
              value="ALIPAY_LOGON_ID"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          :label="$language.local('户名')"
          prop="payeeInfo.name"
        >
          <xy-input v-model="agencyFormData.payeeInfo.name"></xy-input>
        </el-form-item>
        <el-form-item
          :label="$language.local('账号')"
          prop="payeeInfo.identity"
        >
          <xy-input v-model="agencyFormData.payeeInfo.identity"></xy-input>
        </el-form-item>

        <el-form-item
          :label="$language.local('orderTitle')"
          prop="orderTitle"
        >
          <xy-input v-model="agencyFormData.orderTitle"></xy-input>
        </el-form-item>
        <el-form-item :label="$language.local('remark')">
          <xy-input v-model="agencyFormData.remark"></xy-input>
        </el-form-item>
      </el-form>
      <div class="form-footer">
        <el-button
          @click="onSubmit"
          type="primary"
        >提交</el-button>
      </div>
    </el-dialog>
    <!-- #endregion -->
  </div>
</template>

<script>
import API from "../../plugins/api";

export default {
  inject: ["reload"],
  data() {
    return {
      api: new API("/api/ServiceProvider"),
      signUrl: "",
      signInfo: {},
      signVisible: false,
      signInfoVisible: false,
      viewVisible: false,
      agencyDialogVisible: false,
      rechargeDialogVisible: false,
      rechageUrl: "",
      agencyFormData: {
        transAmount: 0.1,
        remark: "备注",
        orderTitle: "title",
        payeeInfo: {
          identityType: "BANKCARD_ACCOUNT",
          identity: "6214467873101960489",
          name: "汪玉洁",

        },
        code: "",
        payerInfo: {
          identity: "",
          extInfo: ""
        }
      },
      rechargeFormData: {
        transAmount: 0.1,

        remark: "remark",
        orderTitle: "title",
      },
      service: {},
      accountBook: {},
      extCardInfo: {},
      columns: {
        ServiceName: "服务商",
        UnifiedSocialCreditCode: "",
        BankName: "",
        AcctNo: "",
        // ServiceType: "",
        // customerName: "客户名称",
        // Amount: "金额",
        // // WorkContent: "工作内容",
        // Ctime: "创建时间",
      },

      addFormDTO: {
        MID: 0,
        TID: 0,
        ServiceNo: "string",
        LegalPersonName: "string",
        identNo: "string",
        wmsignuserId: "string",
        sealId: "string",
        areaName: "string",
        BankName: "string",
        AcctNo: "string",
        ServiceName: "string",
        Rate: 0,
        status: 0,
        UnifiedSocialCreditCode: "string",
        AgentName: "string",
        AgentIdCardNo: "string",
        ElectronicChapter: "string",
        AgentPhone: "string",
        ServiceTelePhone: "string",
        TaxAgreementContent: "string",
        FileAttId: "string",
      },
    };
  },
  created(){
    this.getSignInfo(4);
  },
  methods: {
    async  onShowSignDialog(row){
      console.log(row);
      const response = await fetch(`http://m.xinyueai.com/api/AlipaySign/${row.Id}`).then(res=>res.json());
      if (response.isError) {
        this.signVisible = true;
        const response2 = await fetch(`http://m.xinyueai.com/api/AlipaySignUrl/${row.Id}?merchantName=${row.ServiceName}`).then(res=>res.json());
        console.log(response2);
        this.signUrl = response2.signUrl;
      }else{
        this.signInfoVisible = true;
        this.signInfo = response;
      }

    },
    onView(row){
      console.log(row);
      this.viewVisible = true;
      this.service = row;

    },
    async getSignInfo(id){
      const response = await this.$alipay.get(`/api/AlipaySign/${id}`);
      if (!response.data.isError) {
        this.signInfo = response.data;
        this.createAccountBook(id, response.data.agreementNo);
      }
    },
    async createAccountBook(merchantUserId, agreementNo){
      let body = {
        merchantUserId: merchantUserId.toString(),
        extInfo: {
          agreementNo
        }
      };
      console.log(body);
      const response = await this.$alipay.post("/api/AccountBook", body);

      console.log(response);
      this.accountBook = response.data;
      this.extCardInfo = this.accountBook.extCardInfo;
      this.getAccountBook(merchantUserId, agreementNo, this.accountBook.accountBookId);
    },
    async getAccountBook(id, agreementNo, accountBookId){
      const response = await this.$alipay.get(`/api/AccountBook/${id}?agreementNo=${agreementNo}&accountBookId=${accountBookId}`);
      console.log(response);
      this.accountBook = response.data;
    },
    async  onRecharge(){
      await this.$refs.rechargeForm.validate();
      let extInfo = `{"agreement_no":"${this.signInfo.agreementNo}"}`;
      this.rechargeFormData.payeeInfo = {
        identity: this.accountBook.accountBookId,
        extInfo: extInfo,
      };
      console.log(this.rechargeFormData);

      const response = await this.$alipay.post("/api/PayOrder", this.rechargeFormData);
      console.log(response);
      this.rechageUrl = response.data.body;
      console.log(this.rechageUrl);
      window.open(this.rechageUrl, "_blank");

      // const div = document.createElement("div");
      // div.innerHTML = response.data.body;
      // document.body.appendChild(div);
      //
      // div.firstChild.submit(); // 重要，这个才是点击跳页面的核心

    },
    openBillUrl(){
      window.open("https://mbillexprod.alipay.com/enterprise/fundList.htm#/", "_blank");
    },
    showAgencyDialog(){
      this.agencyDialogVisible = true;
    },
    showRechargeDialog(){
      this.rechargeDialogVisible = true;
    },
    async onSubmit(){
      await this.$refs.agencyForm.validate();
      if (this.agencyFormData.payeeInfo.identityType === "BANKCARD_ACCOUNT") {
        let bankcardExtInfo = {
          instName: "",
          instProvince: "",
          instCity: "",
          instBranchName: "",
          accountType: "2"
        };
        this.agencyFormData.payeeInfo.bankcardExtInfo = bankcardExtInfo;
      }

      this.agencyFormData.payerInfo.extInfo = `{agreement_no:${this.signInfo.agreementNo}}`;
      this.agencyFormData.payerInfo.identity = this.accountBook.accountBookId;
      console.log(this.agencyFormData);

      const response = await this.$alipay.post("/api/Transfer", this.agencyFormData);
      console.log(response);
      if (response.data.code === "10000") {
        this.$message.success("转账成功");
      }
      this.reload();
    },
    async onUnsign(){
      const response = await this.$alipay.delete(`/api/AlipaySign/${this.signInfo.agreementNo}`);
      console.log(response);
    }
  }
};
</script>

<style></style>
